<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugin/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <jsp:include page="../module/top.jsp"></jsp:include>

    <jsp:include page="../module/left.jsp"></jsp:include>


    <div class="layui-body">
        <div style="padding: 15px;" id="content_div">
            <div class="layui-form" action="" lay-filter="example">
                <input type="hidden" name="id" id="id" value="${not empty blogBanner?blogBanner.id:""}">
                <div class="layui-form-item">
                    <label class="layui-form-label">banner名称</label>
                    <div class="layui-input-inline">
                        <input type="text" id="bannername" name="bannername" lay-verify="title" autocomplete="off"
                               placeholder="标签名称" class="layui-input"
                               value="${not empty blogBanner?blogBanner.bannername:""}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">文件上传</label>
                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn" id="fileupload">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                        <c:if test="${empty blogBanner}">
                            <img id="imgpath" width="200px" src="">
                        </c:if>
                        <c:if test="${not empty blogBanner}">
                            <img id="imgpath" width="200px" src="${pageContext.request.contextPath}${blogBanner.picPath}">
                        </c:if>

                        <input type="hidden" id="picPath" name="picPath" value="${not empty blogBanner?blogBanner.picPath:""}">

                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" onclick="save()">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <jsp:include page="../module/bottom.jsp"></jsp:include>
</div>
<script src="${pageContext.request.contextPath}/static/js/jquery-2.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/plugin/layui/layui.all.js"></script>
<script type="text/javascript">
    var form = layui.form;
    var layer = layui.layer;
    var upload = layui.upload;
    ;
    //普通图片上传
    var uploadInst = upload.render({
        elem: '#fileupload'
        , url: '/file/upload'
        , field: 'file'
        , before: function (obj) {
            //预读本地文件示例，不支持ie8
            obj.preview(function (index, file, result) {
                $('#imgpath').attr('src', result); //图片链接（base64）
            });
        }
        , done: function (res) {
            if (res.status) {
                $("#picPath").val(res.data);
            } else {
                $("#picPath").val("");
            }
        }
        , error: function () {
            layer.msg('上传失败');
        }
    });
    //监听提交
    function save() {
        var id = $("#id").val();
        var bannername = $("#bannername").val();
        var picPath = $("#picPath").val();
        var obj = {"id": id, "bannername": bannername,"picPath":picPath}
        var jsonstr = JSON.stringify(obj);
        $.ajax({
            url: '${pageContext.request.contextPath}/blogbanner/save_blogbanner',
            type: 'post',
            dataType: 'json',
            data: {'jsonstr': jsonstr},
            async: false,
            success: function (result) {
                if (result.status) {
                    window.location = '${pageContext.request.contextPath}/blogbanner/blog_banner_list_vlew.html';
                } else {
                    layer.msg(result.msg)
                }
            },
            error: function () {
                alert("异常！");
            }
        });
    }

</script>
</body>
</html>